<template>
  <div class="user">
    <h1>用户管理</h1>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="createTime" label="注册时间">
        <template slot-scope="scope">
          {{ scope.row.createTime | time }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { user } from "../http/index.js";
export default {
  data() {
    return {
      list: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
    };
  },
  methods: {
    userList() {
      user({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        total: this.total,
      }).then((res) => {
        console.log(res);
        this.list = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.userList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.userList();
    },
  },
  created() {
    this.userList();
  },
  filters: {
      time(val) {
        //  let timee = new Date(val);
        //  return timee.toLocaleString()
      let time = new Date(val);
      let y = time.getFullYear()+'/'; //年
      let m =
        (time.getMonth() + 1 < 10
          ? "0" + (time.getMonth() + 1)
          : time.getMonth() + 1)+'/'; //月
      let n =( time.getDate() + 1 < 10 ? "0" + time.getDate() : time.getDate())+'下午';
      var h = (time.getHours()+1) + ":";
      var m2 =(time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()) +":";
      var s =time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
      return y+m+n+h+m2+s;
    },
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.user{
  padding: 0 0 50px 0;
}
h1 {
  font-size: 34px;
  margin: 20px 10px;
}
</style>
